<template>
  <basic-container v-loading="loading" element-loading-text="数据加载中...">
    <dataList
      placeholder="请输入物业或工程名称查询"
      :pageInfo="pager"
      :listData="tableData"
      :selectData="selectDataArr"
      searchName="queryString"
      :menuList="['add','ocr','delete','export']"
      @menu-click="handleMenuClick"
      openSelection
    >
      <el-table ref="multipleTable" align="left" :data="tableData" @selection-change="$event => (selectDataArr = $event)">
        <el-table-column type="selection" width="55" />
        <el-table-column label="物业名称" width="200" prop="propertyName" show-overflow-tooltip />
        <el-table-column label="工程名称" width="250" prop="engineeringName" show-overflow-tooltip />
        <el-table-column label="施工单位" width="150" prop="unitName" show-overflow-tooltip />
        <!--          <el-table-column align="left" label="单位类型" prop="unitType" :formatter="unitTypeFormatter" />-->
        <el-table-column label="合同金额" prop="totalAmount" :formatter="priceFormatter" width="120" show-overflow-tooltip />
        <el-table-column label="工期" prop="constructionPeriod" width="120" />
        <el-table-column label="签订日期" prop="signTime" width="120" />
        <el-table-column label="付款方式" prop="payMethod" width="110" show-overflow-tooltip />
        <!-- <el-table-column align="left" label="已付金额" prop="totalMoney" />
        <el-table-column align="left" label="未付金额" prop="residueAmount" />-->
        <el-table-column label="备注" prop="remarks" width="140" show-overflow-tooltip />
        <el-table-column label="操作" fixed="right" width="150" class="operaColumn">
          <template slot-scope="scope">
            <el-button type="text" :style="{'--color':'#666666'}" size="mini" @click="handleBtnClick('preview',scope.row)">查看</el-button>
            <el-button type="text" :style="{'--color':'#409EFF'}" size="mini" @click="handleBtnClick('edit',scope.row)">编辑</el-button>
            <el-button type="text" :style="{'--color':'#E6A23C'}" size="mini" @click="handleBtnClick('delete',scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </dataList>

    <!-- 新增|编辑|查看 单位 -->
    <departmentDialog ref="editDialog" />
  </basic-container>
</template>

<script>
import { getConstructionPageList, deleteContract, exportData } from "@/views/wy-operate/api/repair.js";
import departmentDialog from './components/dialog'
import { downloadBlob, getDict } from '@/utils'
export default {
  components: {
    departmentDialog
  },
  provide () {
    return {
      initList: this.queryData,
    };
  },
  beforeMount () {
    this.queryData();
  },
  data () {
    return {
      // 表格列表数据
      tableData: [],
      // 请求参数
      params: {
        current: 1,
        size: 20,
        queryString: '',
        businessType: ''
      },
      // 选中的数据
      selectDataArr: [],
      // 分页
      pager: {
        total: 0, // 总页数
        current: 1, // 当前页数
        size: 20 // 每页显示多少条
      },
      // 页面loading
      loading: false,
    }
  },
  computed: {
    unitTypes () {
      return getDict("provider_type")
    }
  },
  methods: {
    // 单位类型格式化
    unitTypeFormatter (row, column, cellValue) {
      let type = this.unitTypes.find(p => p.value == cellValue);
      return type ? type.label : ''
    },
    // 数据请求
    queryData (params = {}) {
      this.loading = true
      let requestData = { ...this.params, ...params }
      getConstructionPageList(requestData).then(res => {
        const { current, size, total, records } = res.data.data
        this.tableData = records
        this.params = requestData
        this.pager = {
          total,
          current,
          size
        }
      }).finally(() => {
        this.loading = false
      })
    },
    // 菜单点击监听
    handleMenuClick (type) {
      switch (type) {
        case 'add':
          this.$router.push('/wy-operate/repair/contract/add')
          break;
        case 'ocr':
          this.$router.push('/wy-operate/repair/contract/ocr')
          break;
        case 'delete':
          let ids = this.selectDataArr.map((sd) => sd.contractId);
          this.deleteData(ids);
          break;
        case 'export':
          this.exportData();
          break;
        default:
          this.$message(type)
          break;
      }
    },
    //表格按钮点击事件监听
    handleBtnClick (type, row = {}) {
      switch (type) {
        case 'preview':
        case 'edit':
        case 'approval':
          this.$refs.editDialog.show({ type, data: JSON.parse(JSON.stringify(row)) })
          break;
        case 'delete':
          this.deleteData([row.contractId]);
          break;
        case 'upload':
          break;
        default:
          break;
      }
    },
    // 删除数据
    async deleteData (data) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        deleteContract(data).then(res => {
          if (res.data.code == 0) {
            this.$message.success("删除成功!")
            this.queryData({ current: 1 })
          }
        })
      }).catch(() => {
        this.$message.info("已取消删除");
      });
    },
    // 导出
    async exportData () {
      const loading = this.$loading({
        lock: true,
        text: "数据处理中",
      });
      const response = await exportData('contract', this.tableData.map(item => item.contractId))
      loading.close()
      var time = new Date();
      let name = time.getFullYear() + '-' + (time.getMonth() + 1) + '-' + time.getDate() + ' ' + time.getHours() + ":" + time.getMinutes() + ":" + time.getSeconds() + '-' + '合同录入.xls';
      downloadBlob(response.data, name)
    }
  }
}
</script>

<style lang="scss" scoped>
.operateMain {
  /deep/ .top-buttons {
    float: right;
    width: 50%;
  }
  /deep/ .v-search {
    width: 50%;
    justify-content: flex-start;
  }
  /deep/ .operaColumn .el-button {
    color: var(--color);
  }
}
</style>


